<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <style>
    body {
      padding: 0;
      margin: 0;
      overflow: hidden
    }

    .section {
      width: 100vw;
      height: 100vh;
    }

    h1 {
      margin: 0px;
    }

    .main-wrap {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      position: relative;
    }

    .main {
      position: absolute;
      top: 0px;
      left: 0px;
      transition: 500ms cubic-bezier(0.86, 0, 0.07, 1);
    }
  </style>
  <title>full page</title>
  <script src="http://hammerjs.github.io/dist/hammer.min.js" charset="utf-8"></script>
</head>

<body>
  <div class="main-wrap">
    <div class="main">
      <div class="section a">
        <h1>第1屏页面</h1>
      </div>
      <div class="section b">
        <h1>第2屏页面</h1>
      </div>
      <div class="section c">
        <h1>第3屏页面</h1>
      </div>
    </div>
  </div>
  <script>
    var sHeight = document.querySelector('.a').clientHeight;
    //获取一屏的高度，判断该移动多少
    var sLength = document.querySelectorAll('.section').length;
    //判断有几屏页面
    var sIndex = 0; //标记当前第几页
    var sScroll = false; //滚动时就不再触发事件，防止误点
    var main = document.querySelector('.main'); //需要移动的DOM

    //感知浏览器窗口大小调整
    window.onresize = function() {
      var i = main.style.top.slice(0, -2) / sHeight;
      sHeight = document.querySelector('.a').clientHeight;
      main.style.top = i * sHeight + 'px';
    }

    function scrollTo(i) {
      //操作动画的函数
      sScroll = true;
      main.style.top = -i * sHeight + 'px';
      setTimeout(function() {
        sScroll = false
      }, 200);
    }

    var hamm = new Hammer(document.querySelector('.main-wrap'));
    hamm.get('swipe').set({
      direction: Hammer.DIRECTION_ALL
    });
    //hammer默认关闭上下swipe 设置开启上下滑屏
    hamm.on('swipedown', function() {
      if (!sScroll) {
        //上一页
        if (sIndex == 0) {
          return;
        }
        sIndex--;
        scrollTo(sIndex);
      }

    });
    hamm.on('swipeup', function() {
      if (!sScroll) {
        //下一页
        if (sIndex == sLength - 1) {
          return;
        }
        sIndex++;
        scrollTo(sIndex);
      }
    });
  </script>
</body>

</html>
